<template>
  <el-main class="paper">
    <el-affix>
      <div class="header-container">
        <div class="header">
          <el-button text size="large" @click="goBack">退出查看</el-button>
          <div class="center">
            {{ examInfo?.examName }}
            <div class="desc">（总分：{{ examInfo?.totalScore }}分，题数：{{ examInfo?.questionCount }} 道，时长：{{ examInfo.answerTime }} 分钟）</div>
          </div>
          <div class="right">
            得分：{{ examInfo?.userScore }} 分
            <el-tag v-if="examInfo.passStatus === 1" type="success">待阅卷</el-tag>
            <el-tag v-if="examInfo.passStatus === 2" type="success">合格</el-tag>
            <el-tag v-if="examInfo.passStatus === 3" type="danger">不及格</el-tag>
          </div>
        </div>
      </div>
    </el-affix>
    <div class="paper-container">
      <!--答题卡-->
      <el-affix :offset="85">
        <div class="paper-card">
          <paper-analysis-card :titles="examInfo.titles" @click="handleClickOption" />
        </div>
      </el-affix>
      <!--题目-->
      <div class="paper-question">
        <div v-for="(item, index) in examInfo.titles" :key="index">
          <div class="title">
            <div class="name">{{ item.titleName }}</div>
          </div>
          <div v-for="(itemSub, indexSub) in item.questions" :key="indexSub">
            <!--题目-->
            <paper-analysis-question :question="itemSub" :index="indexSub + 1" />
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>
<script setup>
  import { examApi } from '~/api/exam'
  const route = useRoute()
  const examInfo = reactive({})

  // 退出查看
  const goBack = () => {
    useRouter().back()
  }

  // 点击答题卡选项
  const handleClickOption = (index) => {
    if (document.getElementById(index)) {
      document.getElementById(index).scrollIntoView({ block: 'center', behavior: 'smooth' })
    }
  }

  onMounted(async () => {
    const res = await examApi.examParse({ recordId: route.query.recordId })
    Object.assign(examInfo, res)

    res.titles.forEach((item) => {
      item.questions.forEach((itemSub) => {
        if (itemSub.questionType === 2) {
          // 多选题答案处理
          itemSub.questionAnswer2 = itemSub.questionAnswer.split('|')
          itemSub.userAnswer2 = itemSub.userAnswer.split('|')
        }
        if (itemSub.questionType === 4) {
          // 填空题答案处理
          itemSub.questionAnswer4 = itemSub.questionAnswer.split('|')
          itemSub.userAnswer4 = itemSub.userAnswer.split('|')
        }
      })
    })
  })
</script>
<style lang="scss" scoped>
  .header-container {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef5;
    .header {
      display: flex;
      align-items: center;
      width: 1200px;
      margin: 0 auto;
      .center {
        flex-direction: column;
        justify-content: center;
        width: 900px;
        font-size: 18px;
        text-align: center;
        .desc {
          color: #777;
          margin-top: 5px;
          font-size: 12px;
        }
      }
      .right {
        flex: 1;
        font-size: 14px;
        text-align: right;
      }
    }
  }

  .paper-container {
    width: 1200px;
    margin: 20px auto;
    display: flex;
    .paper-card {
      width: 300px;
      margin-right: 20px;
      background-color: #fff;
      border-radius: 5px;
      padding: 20px;
      overflow: auto;
      height: calc(100vh - 155px);
    }
    .paper-question {
      flex: 1;
      font-size: 20px;
      //overflow: auto;
      .title {
        border-radius: 5px 5px 0 0;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
        .name {
          padding: 20px;
        }
      }
    }
  }

  .paper {
    height: 100vh;
    margin: 0;
    padding: 0;
  }
</style>
